<template>
	<!-- 首页和跑团活动组件 -->
	<view class="">
		<view class="tiplist">
			<view class="tiplist_list" v-for="(item,index) in tipList" :key="index">
			<view class="tiplist_top">
				<view class="tiplist_top_pic">
					<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/img/03.jpg" mode=""></image>
					<!-- 赛事活动任务 -->
					<view class="kind">
						<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/img/03.jpg" mode=""></image>
						<span>赛事</span>
					</view>
				</view>
				<view class="tiplist_top_info">
					<view class="tiplist_top_title">
						<span>官方</span>
					<!-- 	<view class="gf">
							官方
						</view> -->
						{{item.title}}{{item.title}}
					</view>
					<view class="tiplist_top_message">
						<view class="tiplist_top_message_t">
							<view class="tiplist_top_message_date">
								{{item.date}}
							</view>
							<view class="tiplist_top_message_people">
								报名人数{{item.num}}人
							</view>
						</view>
						<view class="tiplist_top_message_area">
							{{item.area}}
						</view>
					</view>
				</view>
			</view>
			<!-- 跑团名称及状态 -->
			<view class="tiplist_bottom">
				<view class="tiplist_name">
					{{item.name}} <i class="icon" v-if="item.name">&#xe635;</i>
				</view>
				<view class="tiplist_state">
					<span v-if="item.state==0">报名中</span>
					<span v-if="item.state==1">报名已结束</span>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		props:['tipList'],
		data() {
			return {
			}
		}
	}
</script>

<style lang="less" scoped>
	.tiplist {
		background-color: #FFFFFF;
		padding:0 20upx;
		.tiplist_top {
			width: 100%;
			height: 180upx;
			display: flex;
			justify-content: space-between;
			.tiplist_top_pic {
				width: 325upx;
				height: 100%;
				margin-right: 20upx;
				position: relative;
				image {
					width: 100%;
					height: 100%;
				}
				.kind {
					position: absolute;
					width: 60upx;
					height: 50upx;
					top: 0;
					left: 26upx;
					image {
						width: 100%;
						height: 100%;
					}
					span {
						display: block;
						width: 60upx;
						text-align: center;
						font-size: 24upx;
						position: absolute;
						color: #fff;
						top: 10upx;
						left: 50%;
						transform: translate(-50%);
					}
				} 
			}
			.tiplist_top_info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.tiplist_top_title {
					font-size: 28upx;
					line-height: 36upx;
					color: #333333;
					font-weight: bold;
			
					.gf {
							display:inline-block;
							width: 58upx;
							height: 32upx;
							background-color: #8738d2;
							border-radius: 4upx;
							color: #FFFFFF;
							text-align: center;
							line-height: 32upx;
							font-size: 20upx;
							margin-right: 14upx;
					}
					span {
						display:inline-block;
						width: 58upx;
						height: 32upx;
						background-color: #8738d2;
						border-radius: 4upx;
						color: #FFFFFF;
						text-align: center;
						line-height: 32upx;
						font-size: 22upx;
						margin-right: 14upx;
					}
				}
				.tiplist_top_message .tiplist_top_message_t {
					display: flex;
					justify-content: space-between;
					.tiplist_top_message_date,.tiplist_top_message_people {
						font-size: 24upx;
						color: #666666;
					}
				}
				.tiplist_top_message_area {
					font-size: 24upx;
					color: #666666;
				}
			}
		}
		.tiplist_bottom {
			display: flex;
			justify-content: space-between;
			height:80upx;
			align-items: center;
			border-bottom: 1upx solid #e1e1e1;
			.tiplist_name {
				font-size: 24upx;
				color: #333333;
				.icon {font-size: 28upx; margin-left: 6upx;}
			}
			.tiplist_state {
				font-size: 28upx;
				color: #8839d2;
				font-weight: bold;
			}
		}
	}
	.tiplist_list {
		padding-top: 20upx;
	}
	.tiplist_list:last-child {
		.tiplist_bottom {
			border-bottom: 0;
		}
	}
</style>
